<template>
    <div id="app">
  
      <!-- 轮播图 -->
      <section id="carousel" class="carousel-section">
        <div class="carousel">
          <div class="carousel-inner" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
            <div class="slide" v-for="(item, index) in slides" :key="index">
              <img :src="item.image" alt="" />
              <div class="caption">
                <h2>{{ item.title }}</h2>
                <p>{{ item.description }}</p>
                <el-button type="primary" @click="viewDetail(item.id)">了解更多</el-button>
              </div>
            </div>
          </div>
          <button @click="prevSlide" class="carousel-control-prev">❮</button>
          <button @click="nextSlide" class="carousel-control-next">❯</button>
          <div class="carousel-indicators">
            <button v-for="(item, index) in slides" :key="index" @click="setSlide(index)" :class="{ active: currentSlide === index }"></button>
          </div>
        </div>
      </section>
  
      <!-- 濒临花种知识 -->
      <section id="knowledge" class="knowledge-section">
        <div class="containers">
          <h2>濒临花种知识库</h2>
          <div class="knowledge-grid">
            <div class="knowledge-card" v-for="item in knowledgeItems" :key="item.id">
              <div class="knowledge-image">
                <img :src="item.image" :alt="item.name" />
              </div>
              <div class="knowledge-content">
                <h3>{{ item.name }}</h3>
                <div class="knowledge-tags">
                  <el-tag size="small" type="success">{{ item.category }}</el-tag>
                  <el-tag size="small" type="warning">{{ item.region }}</el-tag>
                </div>
                <p class="knowledge-description">{{ item.description }}</p>
                <div class="knowledge-details">
                  <div class="detail-item">
                    <i class="el-icon-location"></i>
                    <span>生长地区：{{ item.habitat }}</span>
                  </div>
                  <div class="detail-item">
                    <i class="el-icon-date"></i>
                    <span>花期：{{ item.bloomingSeason }}</span>
                  </div>
                  <div class="detail-item">
                    <i class="el-icon-medal"></i>
                    <span>保护等级：{{ item.protectionLevel }}</span>
                  </div>
                </div>
                <div class="knowledge-actions">
                  <el-button type="primary" @click="viewFlowerDetail(item.id)">查看详情</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
  
      <!-- 药用价值 -->
      <section id="medicinal" class="medicinal-section">
        <div class="containers">
          <h2>药用价值</h2>
          <div class="medicinal-grid">
            <div class="medicinal-card" v-for="item in medicinalItems" :key="item.id">
              <div class="medicinal-icon">
                <i :class="item.icon"></i>
              </div>
              <h3>{{ item.title }}</h3>
              <p>{{ item.description }}</p>
              <div class="medicinal-details">
                <div class="medicinal-item" v-for="(detail, index) in item.details" :key="index">
                  <h4>{{ detail.title }}</h4>
                  <ul>
                    <li v-for="(effect, idx) in detail.effects" :key="idx">{{ effect }}</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
  
      <!-- 保护措施 -->
      <section id="protection" class="protection-section">
        <div class="containers">
          <h2>保护措施</h2>
          <div class="protection-content">
            <div class="protection-item" v-for="item in protectionItems" :key="item.id">
              <div class="protection-icon">
                <i :class="item.icon"></i>
              </div>
              <div class="protection-text">
                <h3>{{ item.title }}</h3>
                <p>{{ item.description }}</p>
                <ul class="protection-list">
                  <li v-for="(measure, index) in item.measures" :key="index">{{ measure }}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </template>
  
  <script>
  import hualan from '../assets/images/hualan.jpeg'
  import shui from '../assets/images/shui.jpg'
  import OIP from '../assets/images/OIP.jpg'
  // 如果有其他图片，也需要在这里导入

  export default {
    data() {
      return {
        slides: [
          { 
            id: 1,
            image: hualan,
            title: '珍稀兰花',
            description: '探索世界最稀有的兰花品种'
          },
          { 
            id: 2,
            image: shui, 
            title: '神秘睡莲',
            description: '来自亚马逊的珍稀睡莲品种'
          },
          { 
            id: 3,
            image: OIP, 
            title: '帝王牡丹',
            description: '千年古都的国花珍品'
          }
        ],
        currentSlide: 0,
        flowers: [
          { 
            id: 1, 
            image: hualan, 
            name: 'Orchid', 
            description: 'The orchid is a beautiful and rare flower.',
            price: 299,
            stock: 10,
            season: '春季',
            category: '兰花科'
          },
          { 
            id: 2, 
            image: shui, 
            name: 'Lotus', 
            description: 'The lotus is known for its elegance and rarity.',
            price: 199,
            stock: 15,
            season: '夏季',
            category: '睡莲科'
          },
          { 
            id: 3, 
            image: OIP, 
            name: 'Peony', 
            description: 'The peony is a symbol of prosperity and beauty.',
            price: 399,
            stock: 8,
            season: '春季',
            category: '牡丹科'
          }
        ],
        knowledgeItems: [
          // {
          //   id: 1,
          //   name: '幽灵兰花',
          //   category: '兰科',
          //   region: '中国云南',
          //   description: '幽灵兰花是一种极其稀有的兰花品种，因其独特的透明花瓣而得名。',
          //   habitat: '热带雨林',
          //   bloomingSeason: '春季',
          //   protectionLevel: '国家一级保护',
          //   image: hualan
          // },
          {
            id: 2,
            name: '蓝睡莲',
            category: '睡莲科',
            region: '中国海南',
            description: '蓝睡莲是一种珍稀的水生植物，其蓝色花瓣在阳光下会呈现出梦幻般的色彩。',
            habitat: '热带水域',
            bloomingSeason: '夏季',
            protectionLevel: '国家二级保护',
            image: shui
          },
          {
            id: 3,
            name: '帝王牡丹',
            category: '毛茛科',
            region: '中国河南',
            description: '帝王牡丹是中国传统名花，以其硕大的花朵和浓郁的香气闻名于世。',
            habitat: '温带地区',
            bloomingSeason: '春季',
            protectionLevel: '国家一级保护',
            image: OIP
          }
        ],
        medicinalItems: [
          {
            id: 1,
            icon: 'el-icon-first-aid-kit',
            title: '药用价值',
            description: '这些珍稀花卉不仅具有观赏价值，还蕴含着丰富的药用价值。',
            details: [
              {
                title: '传统药用',
                effects: [
                  '清热解毒：用于治疗发热、咽喉肿痛等症状',
                  '活血化瘀：改善血液循环，缓解疼痛',
                  '养心安神：帮助改善睡眠质量，缓解焦虑',
                  '美容养颜：具有抗氧化、抗衰老的功效'
                ]
              },
              {
                title: '现代医学应用',
                effects: [
                  '提取物用于制作抗癌药物',
                  '用于治疗心血管疾病',
                  '在皮肤护理产品中的应用',
                  '用于制作抗炎药物'
                ]
              }
            ]
          },
          {
            id: 2,
            icon: 'el-icon-collection',
            title: '科研价值',
            description: '珍稀花卉对生物多样性研究和生态保护具有重要意义。',
            details: [
              {
                title: '生物研究',
                effects: [
                  '基因研究：用于研究植物进化历程',
                  '生态平衡：研究生态系统中的关键物种',
                  '物种进化：研究植物适应环境的能力',
                  '环境监测：作为环境变化的指示物种'
                ]
              },
              {
                title: '应用研究',
                effects: [
                  '新品种培育：用于改良作物品种',
                  '生物技术：用于开发生物材料',
                  '生态修复：用于环境治理',
                  '科普教育：用于生物多样性教育'
                ]
              }
            ]
          }
        ],
        protectionItems: [
          {
            id: 1,
            icon: 'el-icon-location-information',
            title: '栖息地保护',
            description: '建立自然保护区，保护珍稀花卉的原始生长环境。',
            measures: [
              '划定自然保护区范围',
              '建立生态监测系统',
              '控制游客数量',
              '定期进行环境评估'
            ]
          },
          {
            id: 2,
            icon: 'el-icon-monitor',
            title: '人工繁育',
            description: '开展人工繁育计划，增加珍稀花卉的种群数量。',
            measures: [
              '建立种质资源库',
              '开展组织培养研究',
              '实施人工授粉计划',
              '建立繁育基地'
            ]
          },
          {
            id: 3,
            icon: 'el-icon-warning',
            title: '法律保护',
            description: '制定相关法律法规，严厉打击非法采集和交易。',
            measures: [
              '完善保护法规',
              '加强执法力度',
              '建立举报机制',
              '开展普法宣传'
            ]
          }
        ],
        autoPlayInterval: null
      };
    },
    methods: {
      prevSlide() {
        this.currentSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length;
      },
      nextSlide() {
        this.currentSlide = (this.currentSlide + 1) % this.slides.length;
      },
      setSlide(index) {
        this.currentSlide = index;
      },
      startAutoPlay() {
        this.autoPlayInterval = setInterval(() => {
          this.nextSlide();
        }, 5000);
      },
      stopAutoPlay() {
        if (this.autoPlayInterval) {
          clearInterval(this.autoPlayInterval);
        }
      },
      viewDetail(id) {
        this.$router.push(`/flower/${id}`);
      },
      viewFlowerDetail(id) {
        if (id === 2) {
          this.$router.push('/flower/blue-lotus');
        } else if (id === 3) {
          this.$router.push('/flower/peony');
        }
      }
    },
    mounted() {
      this.startAutoPlay();
    },
    beforeDestroy() {
      this.stopAutoPlay();
    }
  };
  </script>
  
  <style scoped>
#app {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 100%;
  min-height: 100vh;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  margin-left: 15px;
  border-radius: 10px;
  background-color: white;
}
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  
  .carousel-section {
    margin-bottom: 40px;
  }
  .carousel {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  .carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  .slide {
    flex: 1;
    position: relative;
    min-width: 100%;
    height: 500px;
  }
  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: white;
    padding: 2rem;
    text-align: left;
  }
  .caption h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  .caption p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
  }
  .carousel-control-prev,
  .carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 1rem;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  .carousel-control-prev:hover,
  .carousel-control-next:hover {
    background: rgba(0, 0, 0, 0.8);
  }
  .carousel-control-prev {
    left: 1rem;
  }
  .carousel-control-next {
    right: 1rem;
  }
  .carousel-indicators {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
  }
  .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  .carousel-indicators .active {
    background: white;
  }
  
  /* 花朵介绍样式 */
  .flowers-section {
    padding: 40px 0;
  }
  .flower-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
  }
  .flower-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    cursor: pointer;
  }
  .flower-card:hover {
    transform: translateY(-5px);
  }
  .flower-image {
    position: relative;
    height: 200px;
    overflow: hidden;
  }
  .flower-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
  }
  .flower-card:hover .flower-image img {
    transform: scale(1.1);
  }
  .flower-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .flower-card:hover .flower-overlay {
    opacity: 1;
  }
  .flower-details {
    padding: 20px;
  }
  .flower-details h3 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    color: #333;
  }
  .flower-description {
    color: #666;
    margin-bottom: 15px;
    line-height: 1.5;
  }
  .flower-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  .flower-price {
    color: #e4393c;
    font-size: 1.2rem;
    font-weight: bold;
  }
  .flower-stock {
    color: #999;
    font-size: 0.9rem;
  }
  .flower-tags {
    display: flex;
    gap: 10px;
  }
  
  /* 知识库部分样式 */
  .knowledge-section {
    padding: 60px 0;
    background: #f8f9fa;
  }
  
  .knowledge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px;
  }
  
  .knowledge-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
  }
  
  .knowledge-card:hover {
    transform: translateY(-5px);
  }
  
  .knowledge-image {
    height: 200px;
    overflow: hidden;
  }
  
  .knowledge-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
  }
  
  .knowledge-card:hover .knowledge-image img {
    transform: scale(1.1);
  }
  
  .knowledge-content {
    padding: 20px;
  }
  
  .knowledge-content h3 {
    margin: 0 0 15px 0;
    font-size: 1.4rem;
    color: #333;
  }
  
  .knowledge-tags {
    margin-bottom: 15px;
  }
  
  .knowledge-description {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  .knowledge-details {
    margin-bottom: 20px;
  }
  
  .detail-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: #666;
  }
  
  .detail-item i {
    margin-right: 10px;
    color: #409EFF;
  }
  
  /* 药用价值部分样式 */
  .medicinal-section {
    padding: 60px 0;
  }
  
  .medicinal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
  }
  
  .medicinal-card {
    background: white;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  
  .medicinal-icon {
    font-size: 3rem;
    color: #409EFF;
    margin-bottom: 20px;
  }
  
  .medicinal-card h3 {
    margin: 0 0 15px 0;
    color: #333;
  }
  
  .medicinal-card p {
    color: #666;
    margin-bottom: 20px;
  }
  
  .medicinal-details {
    margin-top: 20px;
  }
  
  .medicinal-item {
    margin-bottom: 20px;
  }
  
  .medicinal-item h4 {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.1rem;
  }
  
  .medicinal-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .medicinal-item li {
    padding: 8px 0;
    color: #666;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 20px;
  }
  
  .medicinal-item li:before {
    content: "•";
    color: #409EFF;
    position: absolute;
    left: 0;
  }
  
  /* 保护措施部分样式 */
  .protection-section {
    padding: 60px 0;
    background: #f8f9fa;
  }
  
  .protection-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
  }
  
  .protection-item {
    display: flex;
    align-items: flex-start;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .protection-icon {
    font-size: 2rem;
    color: #409EFF;
    margin-right: 20px;
  }
  
  .protection-text h3 {
    margin: 0 0 10px 0;
    color: #333;
  }
  
  .protection-text p {
    color: #666;
    line-height: 1.6;
    margin: 0;
  }
  
  .protection-list {
    list-style: none;
    padding: 0;
    margin: 15px 0 0 0;
  }
  
  .protection-list li {
    padding: 8px 0;
    color: #666;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 20px;
  }
  
  .protection-list li:before {
    content: "•";
    color: #409EFF;
    position: absolute;
    left: 0;
  }
  
  .protection-list li:last-child {
    border-bottom: none;
  }
  
  .knowledge-actions {
    margin-top: 20px;
    text-align: center;
  }
  
  .knowledge-actions .el-button {
    width: 100%;
  }
  
  @media (max-width: 768px) {
    .slide {
      height: 300px;
    }
    
    .caption h2 {
      font-size: 1.5rem;
    }
    
    .caption p {
      font-size: 1rem;
    }
    
    .flower-grid {
      grid-template-columns: 1fr;
    }
    
    .knowledge-grid,
    .medicinal-grid,
    .protection-content {
      grid-template-columns: 1fr;
    }
    
    .protection-item {
      flex-direction: column;
      text-align: center;
    }
    
    .protection-icon {
      margin: 0 0 15px 0;
    }
  }
  </style>